GamePage.render - Code Metrics - Inspection of "Rough game report template." - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — feature/game-reports ( 6dfcfc )

by Kevin Van

created 2021-03-11 18:34 UTC

GamePage.render F

↳ Parent: GamePage

Complexity

Conditions

Size

Total Lines	119
Code Lines	111

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	111
dl	0
loc	119
rs	3.36
c	0
b	0
f	0
cc	12

How to fix Long Method Complexity

import React, { Component } from "react"

import { graphql } from "gatsby"

import Layout from "../layouts/index"
import SEO from "../components/seo"

class GamePage extends Component {
  constructor(props) {
    super(props)

    this.state = {
      data: [],
      loading: true,
    }

    const {
      data: {
        site: {
          siteMetadata: { kcvvPsdApi, refreshRate },
        },
      },
    } = this.props

    this.kcvvPsdApi = kcvvPsdApi
    this.apiRefreshRate = refreshRate
    this.timeout = {}
    this.matchId = this.props.id || null
  }

  updateData() {
    const apiUrl = `${this.kcvvPsdApi}/match/${this.matchId}`

    fetch(apiUrl)
      .then((response) => response.json())
      .then((json) => this.setState({ data: json, loading: false }))
  }

  componentDidMount() {
    this.updateData()
  }

  render() {
    if (this.state.loading === false && this.state.data) {
      const { general, substitutes, lineup, events } = this.state.data
      const ogImage = {
        src: general?.homeClub.logo,
        width: 180,
        height: 180,
      }

      console.log(lineup.home)
      console.log(lineup.away)
      return (
        <Layout>
          <SEO
            lang="nl-BE"
            title={`Matchverslag ${general?.homeClub?.name} - ${general?.awayClub?.name}`}
            description={`Matchverslag ${general?.homeClub?.name} - ${general?.awayClub?.name}`}
            path={`/game/${general?.id}`}
            image={ogImage}
          />
          <section className="grid-container site-content">
            {general.date}
            <br />
            {general.status}
            <br />
            {general.homeClub.name}
            <img src={general.homeClub.logo} alt={general.homeClub.name} />
            {general.goalsHomeTeam} - {general.goalsAwayTeam}
            {general.awayClub.name}
            <img src={general.awayClub.logo} alt={general.awayClub.name} />
            <br />
            {general.competitionType}
            <br />
            <strong>Home lineup</strong>
            <table>
              <tr>
                <th>A</th>
                <th>Name</th>
                <th>Minutes</th>
              </tr>
              {lineup.home.map((element, i) => (
                <tr key={i}>
                  <td>A</td>
                  <td>{element.playerName}</td>
                  <td>{element.minutesPlayed}</td>
                </tr>
              ))}
            </table>
            <strong>Away lineup</strong>
            <table>
              <tr>
                <th>A</th>
                <th>Name</th>
                <th>Minutes</th>
              </tr>
              {lineup.away.map((element, i) => (
                <tr key={i}>
                  <td>A</td>
                  <td>{element.playerName}</td>
                  <td>{element.minutesPlayed}</td>
                </tr>
              ))}
            </table>
            <strong>Home subs</strong>
            <table>
              <tr>
                <th>A</th>
                <th>Name</th>
                <th>Minutes</th>
              </tr>
              {substitutes.home.map((element, i) => (
                <tr key={i}>
                  <td>A</td>
                  <td>{element.playerName}</td>
                  <td>{element.minutesPlayed}</td>
                </tr>
              ))}
            </table>
            <strong>Away lineup</strong>
            <table>
              <tr>
                <th>A</th>
                <th>Name</th>
                <th>Minutes</th>
              </tr>
              {substitutes.away.map((element, i) => (
                <tr key={i}>
                  <td>A</td>
                  <td>{element.playerName}</td>
                  <td>{element.minutesPlayed}</td>
                </tr>
              ))}
            </table>
            <strong>Events</strong>
            <table>
              <tr>
                <th>Event</th>
                <th>Name</th>
                <th>Minute</th>
              </tr>
              {events.map((element, i) => (
                <tr key={i}>
                  <td>{element.action}</td>
                  <td>{element.playerName}</td>
                  <td>{element.minute}</td>
                </tr>
              ))}
            </table>
          </section>
        </Layout>
      )
    } else {
      return (
        <Layout>
          <section className="grid-container site-content">
            Matchverslag inladen...
          </section>
        </Layout>
      )
    }
  }
}

export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        siteUrl
        kcvvPsdApi
        refreshRate
      }
    }
  }
`

export default GamePage


1			import React, { Component } from "react"
2
3			import { graphql } from "gatsby"
4
5			import Layout from "../layouts/index"
6			import SEO from "../components/seo"
7
8			class GamePage extends Component {
9			constructor(props) {
10			super(props)
11
12			this.state = {
13			data: [],
14			loading: true,
15			}
16
17			const {
18			data: {
19			site: {
20			siteMetadata: { kcvvPsdApi, refreshRate },
21			},
22			},
23			} = this.props
24
25			this.kcvvPsdApi = kcvvPsdApi
26			this.apiRefreshRate = refreshRate
27			this.timeout = {}
28			this.matchId = this.props.id \|\| null
29			}
30
31			updateData() {
32			const apiUrl = `${this.kcvvPsdApi}/match/${this.matchId}`
33
34			fetch(apiUrl)
35			.then((response) => response.json())
36			.then((json) => this.setState({ data: json, loading: false }))
37			}
38
39			componentDidMount() {
40			this.updateData()
41			}
42
43			render() {
44			if (this.state.loading === false && this.state.data) {
45			const { general, substitutes, lineup, events } = this.state.data
46			const ogImage = {
47			src: general?.homeClub.logo,
48			width: 180,
49			height: 180,
50			}
51
52			console.log(lineup.home)
53			console.log(lineup.away)
54			return (
55			<Layout>
56			<SEO
57			lang="nl-BE"
58			title={`Matchverslag ${general?.homeClub?.name} - ${general?.awayClub?.name}`}
59			description={`Matchverslag ${general?.homeClub?.name} - ${general?.awayClub?.name}`}
60			path={`/game/${general?.id}`}
61			image={ogImage}
62			/>
63			<section className="grid-container site-content">
64			{general.date}
65			<br />
66			{general.status}
67			<br />
68			{general.homeClub.name}
69			<img src={general.homeClub.logo} alt={general.homeClub.name} />
70			{general.goalsHomeTeam} - {general.goalsAwayTeam}
71			{general.awayClub.name}
72			<img src={general.awayClub.logo} alt={general.awayClub.name} />
73			<br />
74			{general.competitionType}
75			<br />
76			<strong>Home lineup</strong>
77			<table>
78			<tr>
79			<th>A</th>
80			<th>Name</th>
81			<th>Minutes</th>
82			</tr>
83			{lineup.home.map((element, i) => (
84			<tr key={i}>
85			<td>A</td>
86			<td>{element.playerName}</td>
87			<td>{element.minutesPlayed}</td>
88			</tr>
89			))}
90			</table>
91			<strong>Away lineup</strong>
92			<table>
93			<tr>
94			<th>A</th>
95			<th>Name</th>
96			<th>Minutes</th>
97			</tr>
98			{lineup.away.map((element, i) => (
99			<tr key={i}>
100			<td>A</td>
101			<td>{element.playerName}</td>
102			<td>{element.minutesPlayed}</td>
103			</tr>
104			))}
105			</table>
106			<strong>Home subs</strong>
107			<table>
108			<tr>
109			<th>A</th>
110			<th>Name</th>
111			<th>Minutes</th>
112			</tr>
113			{substitutes.home.map((element, i) => (
114			<tr key={i}>
115			<td>A</td>
116			<td>{element.playerName}</td>
117			<td>{element.minutesPlayed}</td>
118			</tr>
119			))}
120			</table>
121			<strong>Away lineup</strong>
122			<table>
123			<tr>
124			<th>A</th>
125			<th>Name</th>
126			<th>Minutes</th>
127			</tr>
128			{substitutes.away.map((element, i) => (
129			<tr key={i}>
130			<td>A</td>
131			<td>{element.playerName}</td>
132			<td>{element.minutesPlayed}</td>
133			</tr>
134			))}
135			</table>
136			<strong>Events</strong>
137			<table>
138			<tr>
139			<th>Event</th>
140			<th>Name</th>
141			<th>Minute</th>
142			</tr>
143			{events.map((element, i) => (
144			<tr key={i}>
145			<td>{element.action}</td>
146			<td>{element.playerName}</td>
147			<td>{element.minute}</td>
148			</tr>
149			))}
150			</table>
151			</section>
152			</Layout>
153			)
154			} else {
155			return (
156			<Layout>
157			<section className="grid-container site-content">
158			Matchverslag inladen...
159			</section>
160			</Layout>
161			)
162			}
163			}
164			}
165
166			export const pageQuery = graphql`
167			query {
168			site {
169			siteMetadata {
170			siteUrl
171			kcvvPsdApi
172			refreshRate
173			}
174			}
175			}
176			`
177
178			export default GamePage
179

soniCaH / KCVV-Elewijt-Gatsby

Push — feature/game-reports ( 6dfcfc )

GamePage.render F

Complexity

Size

Duplication

Importance

How to fix Long Method Complexity

Long Method

Complexity

Duplication Side-by-Side

Filter issues like